<template>
	<view v-if="user" class="personal-info">
		<view class="header">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image v-if='user.headImage' class="avatar" :src="user.headImage" mode=""></image>
				<image v-else class="avatar" :src="$getImgPath('zQVYUWqXq3Ut9c2f0ee8a3c7c9638a54940382568c9d_1681729617838.png')"></image>
			</button>
		</view>
		<view class="list-panel">
			<view class="item">
				<view class="label">昵称：</view>
				<input class="value" type="text" maxlength="10" v-model="user.nickName" />
			</view>
		</view>
		<view class="submit-button" @click.stop="save">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: null
			};
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.getInfo()
			}
		},
		methods:{
			onChooseAvatar(e){
				uni.getFileSystemManager().readFile({
					filePath: e.detail.avatarUrl,
					encoding: 'base64',
					success: res => {
						this.$utils.system.loading("上传中，请稍后");
						this.$apis.config.uploadBase64({
							base64Str: res.data
						}).then(result => {
							this.user.headImage = result;
						}).catch(err => {
							console.log(err)
						}).finally(() => {
							uni.hideLoading();
						});
					},fail: (e) => {
						console.log("图片转换失败");
					}
				})
			},
			getInfo(){
				this.$utils.system.loading("加载中，请稍后");
				this.$apis.user.getInfo().then(res => {
					this.user = res.userInfo;
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					uni.hideLoading();
				});
			},
			save(){
				if(!this.user.nickName){
					this.$utils.system.tip("昵称不能为空")
					return
				}
				this.$utils.system.loading("保存中，请稍后");
				this.$apis.user.update(this.user).then(res => {
					this.getInfo()
					this.$utils.system.tip("保存成功")
					setTimeout(() => {
						uni.navigateBack({ delta: 2 });
					}, 3000);
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 3000)
				});
			}
		}
	}
</script>

<style lang="scss">
	.personal-info{
		padding: 0 40rpx;
		.header{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 250rpx;
			padding-top: 50rpx;
			.avatar-wrapper::after{
				border: none;
			}
			.avatar-wrapper{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				overflow: hidden;
				padding: 0;
				box-shadow: 0 0 40rpx rgba(231, 231, 231, 0.5);
				background-color: none;
				border: 1rpx solid #F1F1F1;
				outline: 0;
				background-color: #FFFFFF;
				.avatar{
					width: 150rpx;
					height: 150rpx;
				}
			}
			
		}
		.list-panel {
			box-shadow: 0 0 40rpx rgba(231, 231, 231, 0.5);
			margin-top: 40rpx;
			border-radius: 20rpx;
			overflow: hidden;
			border: 1rpx solid #F6F6F6;
		
			.item {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				height: 90rpx;
				background-color: #FFFFFF;
				padding: 0 30rpx;
		
				.label {
					width: 100rpx;
					font-size: 30rpx;
					height: 90rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #666666;
				}
				.value {
					width: calc(100% - 100rpx);
					font-size: 30rpx;
					color: #333333;
					height: 90rpx;
					text-align: left;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.disable{
					color: #666666;
				}
			}
		
			.border-b {
				border-bottom: 1rpx solid #F6F6F6;
			}
		}
		.submit-button{
			margin: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			border-radius: 46rpx;
			background: $xzfx-theme;
			color: #FFFFFF;
			font-size: 32rpx;
			padding: 0 40rpx;
			overflow: hidden;
		}
	}
</style>
